<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modifyModal">打开模态框</button>
    <!-- 
    在模态弹框中，通常会使用 tabindex="-1" 来确保弹框在打开时可以通过 JavaScript 聚焦，而不影响页面的其他元素的焦点顺序。 
    role="dialog"，用于指定模态框为对话框。
-->
    <div class="modal fade" id="modifyModal" tabindex="-1" role="dialog"></div>

    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>